<template>
  <div>
    <el-button type="primary" @click="showDialog = true">新增日程</el-button>
    <br />
    <br />
    <el-table :data="list">
      <el-table-column
        label="开始时间"
        prop="startTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="结束时间"
        prop="endTime"
        align="center"
      ></el-table-column>
      <el-table-column
        label="事件"
        prop="event"
        align="center"
      ></el-table-column>
      <el-table-column
        label="地点"
        prop="place"
        align="center"
      ></el-table-column>
      <el-table-column
        label="备注"
        prop="remarks"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="text" icon="Edit" @click="updateFN(scope.row)"
            >编辑</el-button
          >
          <el-button type="text" icon="Delete" @click="delFN(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹框 -->
    <el-dialog
      v-model="showDialog"
      width="40%"
      append-to-body
      center
      draggable
      @close="close"
      v-if="showDialog"
      :title="addForm.id ? '编辑日程信息' : '新增日程信息'"
    >
      <el-form ref="Dialog" :model="addForm" label-width="120px" :rules="rules">
        <el-row>
          <el-form-item label="开始时间:" prop="startTime">
            <el-date-picker
              v-model="addForm.startTime"
              type="datetime"
              placeholder="开始时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="结束时间：" prop="endTime">
            <el-date-picker
              v-model="addForm.endTime"
              type="datetime"
              placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="地 点:" prop="place">
            <el-input
              v-model="addForm.place"
              placeholder="请输入"
              style="width: 220px"
            />
          </el-form-item>
          <el-form-item label="事 件:" prop="event">
            <el-input
              v-model="addForm.event"
              placeholder="请输入"
              style="width: 220px"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="备 注:" prop="remarks">
            <el-input
              v-model="addForm.remarks"
              :autosize="{ minRows: 2, maxRows: 8 }"
              type="textarea"
              placeholder="请输入"
              style="min-width: 320px"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="btnOkFN">确 定</el-button>
          <el-button type="warning" @click="warningFN">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <br />
    <br />
    <el-row justify="center">
      <el-button type="primary" v-if="route.query.id" @click="xiaFN(id)"
        >上一步</el-button
      >
      <el-button type="primary" @click="goBack">保存</el-button>
    </el-row>
  </div>
</template>

<script setup>
import {
  trainScheduleList,
  trainScheduleAdd,
  trainScheduleUpdate,
  trainScheduleDel,
} from "@/api/train/TrainSchedule.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const showDialog = ref(false);
const Dialog = ref();
const list = ref();
const emit = defineEmits(["xiaFN"]);
const props = defineProps({
  id: {},
  projectId: {},
});
const id = ref(props.id);
const data = reactive({
  addForm: {},
  rules: {
    place: [{ required: true, message: "请输入", trigger: "blur" }],
    event: [{ required: true, message: "请输入", trigger: "blur" }],
    remarks: [{ required: true, message: "请输入", trigger: "blur" }],

    startTime: [
      {
        required: true,
        message: "请选择时间",
        trigger: "change",
      },
    ],
    endTime: [
      {
        required: true,
        message: "请选择时间",
        trigger: "change",
      },
    ],
  },
  train: {
    trainId: props.id,
  },
});
const { addForm, rules, train } = toRefs(data);

initData();
// 获取列表信息
async function initData() {
  let res = await trainScheduleList(train.value);
  list.value = res.rows;
  console.log(res);
}
// 确定按钮
async function btnOkFN() {
  try {
    await Dialog.value.validate();
  } catch (error) {
    console.log(error);
    return false;
  }

  if (addForm.value.id) {
    // 编辑
    await trainScheduleUpdate(addForm.value);
  } else {
    // 新增
    addForm.value.trainId = train.value.trainId;
    await trainScheduleAdd(addForm.value);
  }
  close();
}

// 取消
function warningFN() {
  close();
}

// 编辑按钮
function updateFN(row) {
  showDialog.value = true;
  addForm.value = row;
}

// 返回
function goBack() {
  router.go(-1);
}

// 删除 日程
async function delFN(row) {
  proxy.$modal
    .confirm('是否确认删除事件为"' + row.event + '"的数据项？')
    .then(function () {
      addForm.value.id = row.id;
      trainScheduleDel(addForm.value);
    })
    .then(() => {
      initData();
      addForm.value = {};
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

// 关闭弹框
function close() {
  showDialog.value = false;
  addForm.value = {};
  initData();
}

// 上一步
function xiaFN(id) {
  emit("xiaFN", 2, id, props.projectId);
}
</script>

<style scope></style>
